<template>

  <div class="body">
    <f-header />
    <div class="w-full h-full overflow-hidden">
      <main class="main w-full h-full">
        <transition name="fade">
          <router-view v-slot="{ Component }">
            <keep-alive :max="10" :include="aliveList">
              <component :is="Component" :key="Component"></component>
            </keep-alive>
          </router-view>
        </transition>
      </main>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import FHeader from "./components/FHeader.vue";
import { routes } from "../router/index";
import { compentsKey, randomString } from '~/pages/home/index'

import { useStore } from "vuex";
const store = useStore();

const aliveList = computed(() => {
  let list = routes[0].children;
  let k = [];
  list.forEach((v) => {
    if (v.meta.keepAlive) {
      k.push(v.name);
    }
  });
  console.log(k);
  return k;
});


// 监听窗口变化
window.addEventListener("resize", () => {
  compentsKey.value = randomString(5)

});


</script>
<style>
#app {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  /* min-width: 1200px!important;
    max-width: 1920px!important; */
  /* min-width: 1920px; */
  /* width: 1920px; */
  height: 1080px;
  width: 1920px;
  /* background: url(../assets/bg.png) no-repeat center; */
  background-size: 100% 100%;
  margin-left: auto;
  margin-right: auto;
  @apply flex flex-col;

}

.main {
  /* background: url(../assets/bg@2x.png) no-repeat center; */
  background-size: 100% 100%;
}

.el-aside {
  transition: all 0.2s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}
</style>
